<template>
  <el-dialog
    draggable
    width="60%"
    class="dialog"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    @close="close"
  >
    <template #header>
      <div class="h4" style="margin-bottom: 20px">订单占有列表</div>
      <div class="leve_title">货品: [{{ specNo || '' }}]</div>
    </template>
    <el-table
      border
      height="290"
      style="width: 100%"
      ref="multipleTableRef"
      :data="dataSource"
      v-loading="data.loading"
    >
      <el-table-column label="序号" align="center" width="80">
        <template #default="scope">
          <span v-text="scope.$index + 1"></span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, i) in data.cloums"
        :key="i"
        :width="item.width"
        :prop="item.prop"
        :label="item.label"
        :align="
          item.type == 'money' || item.type == 'number' ? 'right' : 'center'
        "
      >
        <template #header>
          <span class="text_center">{{ item.label }}</span>
        </template>
        <template #default="scope">
          <!-- 自定义 -->
          <div v-if="item.type == 'custom'">
            <span class="ellipsis">
              {{ orderType(scope.row.order_status) }}
            </span>
          </div>
          <!-- 正常 -->
          <div v-else class="ellipsis">
            {{ FieldFormat(scope.row[item.prop], item.type) }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { FieldFormat } from '~/src/utils/utils'
  import { CheckOrderCloums } from './tools'
  import { getInventoryPossessList } from '~/src/api/dms/inventory'

  import { orderType } from '~/src/views/order_management/orderText'
  import lodash from 'lodash'
  import { ElMessage } from 'element-plus'
  /**
   * @var
   */
  const data = reactive<any>({
    dataSource: [],
    cloums: [],
    pageNum: 1,
    pageSize: 20,
    count: 0,
    search: {},
  })

  const dataSource = ref<any>([])

  data.cloums = CheckOrderCloums

  const multipleTableRef = ref()
  const dialogVisible = ref(false)
  const specNo = ref<any>(null)
  const apiId = ref<any>()
  const apiType = ref<any>()
  const loading = ref(false)
  // 是否获取全部
  const isGainAll = ref(false)

  /**
   * @method
   */

  const open = async (row: any, type = 0) => {
    loading.value = true

    const { spec_no, id } = row

    specNo.value = spec_no
    apiId.value = id
    apiType.value = type

    dataSource.value = []

    await _getList()
    dialogVisible.value = true
  }
  const close = () => {
    dialogVisible.value = false
  }

  const _getList = async () => {
    let query = {
      page: data.pageNum,
      limit: data.pageSize,
      type: apiType.value, //固定必传，0库存查询，1库存明细查询
      stock_id: apiId.value, //0为库存id，1为库存明细id
      filter: {},
    }

    try {
      let res = await getInventoryPossessList({ ...query })

      data.count = res.data.count
      dataSource.value = [...dataSource.value, ...res.data.list]

      loading.value = false
    } catch (error) {}
  }

  const watchScroll = lodash.debounce(() => {
    multipleTableRef.value.$refs.bodyWrapper.addEventListener(
      'scroll',
      async (res: any) => {
        const { clientHeight, scrollTop, scrollHeight } = res.target
        if (clientHeight + scrollTop === scrollHeight) {
          if (isGainAll.value) return

          if (data.pageNum * 20 < data.count) {
            await data.pageNum++
          } else {
            ElMessage.success('到底了~')
            isGainAll.value = true
            return
          }
          loading.value = true
          _getList()
        }
      },
      true
    )
  }, 1000)

  /**
   * @周期
   */

  watchEffect(() => {
    if (multipleTableRef.value) watchScroll()
  })

  defineExpose({
    open,
    close,
  })
</script>

<style lang="scss" scoped>
  .dialog {
    .h4 {
      font-size: 18px;
      color: #303132;
      font-weight: 600;
    }

    :deep() {
      .el-dialog__body {
        padding-top: 12px !important;
      }
    }
  }
</style>
